<template>
	<view class="index-bg">
		<view class="stars">
			<view class="star"></view>
			<view class="star" style="top: 80px; left: 800px; animation-delay: 3s;"></view>
			<view class="star" style="top: 40px; left: 646px; animation-delay: 2s;"></view>
			<view class="star" style="top: 120px; left: 395px; animation-delay: 4s;"></view>
			<view class="star" style="top: 160px; left: 765px; animation-delay: 1s;"></view>
			<view class="star" style="top: 170px; left: 1200px; animation-delay: 2s;"></view>
			<view class="star" style="top: 200px; left: 1000px; animation-delay: 1s;"></view>
		</view>
		<soure :url="url"></soure>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'https://blog.csdn.net/juzipidemimi/article/details/90638248'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	@-webkit-keyframes star-opacity {
		0% {
			opacity: 0
		}

		40% {
			opacity: 1
		}

		60% {
			opacity: 1
		}

		100% {
			opacity: 0
		}
	}

	@keyframes star-opacity {
		0% {
			opacity: 0
		}

		40% {
			opacity: 1
		}

		60% {
			opacity: 1
		}

		100% {
			opacity: 0
		}
	}

	@-webkit-keyframes star-pos {
		0% {
			transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0)
		}

		100% {
			transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0)
		}
	}

	@keyframes star-pos {
		0% {
			transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0)
		}

		100% {
			transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0)
		}
	}

	page {
		padding: 0;
		margin: 0;
	}

	.index-bg {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
	}

	.index-bg .stars {
		height: 0
	}

	.index-bg .star {
		display: block;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #fff;
		top: 100px;
		left: 400px;
		position: relative;
		-webkit-transform-origin: 100% 0;
		transform-origin: 100% 0;
		-webkit-animation: star-opacity 5s infinite ease-in, star-pos 5s infinite ease-in;
		animation: star-opacity 5s infinite ease-in, star-pos 5s infinite ease-in;
		-webkit-box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
		box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
		opacity: 0;
		z-index: 2
	}

	.index-bg .star:after {
		content: '';
		display: block;
		top: 0;
		left: 4px;
		border: 0 solid #fff;
		border-width: 0 90px 2px;
		border-color: transparent transparent transparent rgba(255, 255, 255, .3);
		-webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
		transform: rotate(-45deg) translate3d(1px, 3px, 0);
		-webkit-box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
		box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
		-webkit-transform-origin: 0% 100%;
		transform-origin: 0% 100%
	}
</style>
